<template>
	<!-- 交易 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<!-- 顶部tabbar -->
			<view class="topBar mt-3 flex" style="margin: 0 70rpx;" :class="model=='light'?'topBarLight':''">
				<view @click="changeTopBarIndex(0)" :class="topBarIndex==0?'item2':'item'"
					class="A-Medium flex-1 flex align-center justify-center">
					{{i18n.t001}}
				</view>
				<view @click="changeTopBarIndex(1)" :class="topBarIndex==1?'item2':'item'"
					class="A-Medium flex-1 flex align-center justify-center">
					{{i18n.t002}}
				</view>
				<view @click="changeTopBarIndex(2)" :class="topBarIndex==2?'item2':'item'"
					class="A-Medium flex-1 flex align-center justify-center">
					{{i18n.t003}}
				</view>
			</view>
			<template v-if="topBarIndex==0">
				<!-- 切换买入卖出 -->
				<view class="flex align-center justify-between">
					<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
						<view @click="changeOperateType(1)" class="mr-4 flex align-center justify-center"
							:class="1==operateType?'item1':'item'">
							{{i18n.t004}}
						</view>
						<view @click="changeOperateType(2)" class="mr-4 flex align-center justify-center"
							:class="2==operateType?'item1':'item'">
							{{i18n.t005}}
						</view>
					</view>
					<!-- <view @click="$tool.navTo('/pages/fwb/fwb?type=1')" class="label mt-3 A-Regular"
						:class="model=='light'?'labelLight':''">
						{{i18n.t006}}
					</view> -->
					<view @click="$tool.navTo('/pages/fwb/fwb?type=1')" class="f0 mt-3 mr-3">
						<image style="width: 30rpx;height: 30rpx;" :src="'/static/images/guize_'+model+'.png'" mode="">
						</image>
					</view>
				</view>
			</template>
			<template v-if="topBarIndex==1">
				<!-- 切换买入卖出 -->
				<view class="flex align-center justify-between">
					<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
						<!-- <view @click="changeOperateType(1)" class="mr-4 flex align-center justify-center"
							:class="1==operateType?'item1':'item'">
							USDT
						</view> -->
						<view @click="changeOperateType2(0)" class="mr-4 flex align-center justify-center"
							:class="0==operateType2?'item1':'item'">
							USDT
							<view class="f0">
								<image style="width: 26rpx;height: 26rpx;" v-if="0==operateType2"
									:src="'/static/images/xuanzhong_'+model+'.png'" mode=""></image>
								<image style="width: 26rpx;height: 26rpx;" v-else
									:src="'/static/images/meixuanzhong_'+model+'.png'" mode=""></image>
							</view>
							BTC
						</view>
						<view @click="changeOperateType2(1)" class="mr-4 flex align-center justify-center"
							:class="1==operateType2?'item1':'item'">
							USDT
							<view class="f0">
								<image style="width: 26rpx;height: 26rpx;" v-if="1==operateType2"
									:src="'/static/images/xuanzhong_'+model+'.png'" mode=""></image>
								<image style="width: 26rpx;height: 26rpx;" v-else
									:src="'/static/images/meixuanzhong_'+model+'.png'" mode=""></image>
							</view>
							ETH
						</view>
					</view>
					<!-- <view @click="$tool.navTo('/pages/fwb/fwb?type=13')" class="label mt-3 A-Regular"
						:class="model=='light'?'labelLight':''">
						{{i18n.t006}}
					</view> -->
					<view @click="$tool.navTo('/pages/fwb/fwb?type=13')" class="f0 mt-3 mr-3">
						<image style="width: 30rpx;height: 30rpx;" :src="'/static/images/guize_'+model+'.png'" mode="">
						</image>
					</view>
				</view>
			</template>
			<!-- 储蓄池banner -->
			<template v-if="topBarIndex==2">
				<view class="flex mt-4 align-center" style="overflow-x: scroll;">
					<view @click="$tool.navTo('/pages/fhjl/fhjl?coinType=USDT')" class="ml-3"
						style="width: 480rpx;height: 238rpx;position: relative;flex-shrink: 0;">
						<view class="f0">
							<image style="width: 480rpx;height: 238rpx;" src="/static/images/bannerBg1.png" mode="">
							</image>
						</view>
						<view class=" A-Bold"
							style="position: absolute;left: 32rpx;top: 36rpx;font-size: 32rpx;color: #FFFFFF;">
							USDT
						</view>
						<view class="flex A-Medium align-center" style="position: absolute;left: 32rpx;top: 120rpx;">
							<view class="" style="font-size: 22rpx;color: #AAACB8;margin-right: 16rpx;">
								{{i18n10.n105}}
							</view>
							<view class="" style="font-size: 22rpx;color: #D22540;">
								+{{tableList2.todayYieldAmount || 0}} USDT
							</view>
						</view>
						<view class="flex A-Medium align-center" style="position: absolute;left: 32rpx;top: 164rpx;">
							<view class="" style="font-size: 22rpx;color: #AAACB8;margin-right: 16rpx;">
								{{i18n10.n106}}
							</view>
							<view class="" style="font-size: 22rpx;color: #fff;">
								+{{tableList2.cumulativeYieldAmount || 0}} USDT
							</view>
						</view>
					</view>
					<view @click="$tool.navTo('/pages/fhjl/fhjl?coinType=BTC')" class="ml-3"
						style="width: 480rpx;height: 238rpx;position: relative;flex-shrink: 0;">
						<view class="f0">
							<image style="width: 480rpx;height: 238rpx;" src="/static/images/bannerBg2.png" mode="">
							</image>
						</view>
						<view class=" A-Bold"
							style="position: absolute;left: 32rpx;top: 36rpx;font-size: 32rpx;color: #FFFFFF;">
							BTC
						</view>
						<view class="flex A-Medium align-center" style="position: absolute;left: 32rpx;top: 120rpx;">
							<view class="" style="font-size: 22rpx;color: #AAACB8;margin-right: 16rpx;">
								{{i18n10.n105}}
							</view>
							<view class="" style="font-size: 22rpx;color: #D22540;">
								+{{tableList1.todayYieldAmount || 0}} BTC
							</view>
						</view>
						<view class="flex A-Medium align-center" style="position: absolute;left: 32rpx;top: 164rpx;">
							<view class="" style="font-size: 22rpx;color: #AAACB8;margin-right: 16rpx;">
								{{i18n10.n106}}
							</view>
							<view class="" style="font-size: 22rpx;color: #fff;">
								+{{tableList1.cumulativeYieldAmount || 0}} BTC
							</view>
						</view>
					</view>
					<view @click="$tool.navTo('/pages/fhjl/fhjl?coinType=ETH')" class="ml-3"
						style="width: 480rpx;height: 238rpx;position: relative;flex-shrink: 0;">
						<view class="f0">
							<image style="width: 480rpx;height: 238rpx;" src="/static/images/bannerBg3.png" mode="">
							</image>
						</view>
						<view class=" A-Bold"
							style="position: absolute;left: 32rpx;top: 36rpx;font-size: 32rpx;color: #FFFFFF;">
							ETH
						</view>
						<view class="flex A-Medium align-center" style="position: absolute;left: 32rpx;top: 120rpx;">
							<view class="" style="font-size: 22rpx;color: #AAACB8;margin-right: 16rpx;">
								{{i18n10.n105}}
							</view>
							<view class="" style="font-size: 22rpx;color: #D22540;">
								+{{tableList3.todayYieldAmount || 0}} ETH
							</view>
						</view>
						<view class="flex A-Medium align-center" style="position: absolute;left: 32rpx;top: 164rpx;">
							<view class="" style="font-size: 22rpx;color: #AAACB8;margin-right: 16rpx;">
								{{i18n10.n106}}
							</view>
							<view class="" style="font-size: 22rpx;color: #fff;">
								+{{tableList3.cumulativeYieldAmount || 0}} ETH
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="" style="height: 30rpx;">

		</view>
		<template v-if="topBarIndex==0">
			<!-- 买入币种 -->
			<view class="formWrap mx-3" :class="model=='light'?'formWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="title A-Medium">
						{{operateType==1?i18n.t007:i18n.t030}}
					</view>
					<view class="money A-Regular">
						{{i18n.t008}} {{
							mairuT=='USDT'?USDTMoney.a:
							mairuT=='BTC'?BTCMoney.a:
							mairuT=='ETH'?ETHMoney.a:''
						}} {{mairuT}}
					</view>
				</view>
				<view class="inputWrap px-2 flex align-center">
					<view @click="clickM(1)" class="flex align-center">
						<view class="f0">
							<!-- usdt -->
							<image v-if="operateType==1" style="width: 40rpx;height: 40rpx;"
								:src="'/static/images/trade/1_'+model+'.png'" mode=""></image>
							<!-- btc -->
							<image v-else-if="mairuT=='BTC'" style="width: 40rpx;height: 40rpx;"
								:src="'/static/images/trade/4_'+model+'.png'" mode=""></image>
							<!-- eth -->
							<image v-else style="width: 40rpx;height: 40rpx;"
								:src="'/static/images/trade/23_'+model+'.png'" mode=""></image>
						</view>
						<view class="inputTitle A-Medium">
							{{mairuT}}
						</view>
						<view class="f0">
							<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/trade/2_'+model+'.png'"
								mode=""></image>
						</view>
					</view>
					<!-- @click="zhuanhuan" -->
					<input type="text" @input="zhuanhuan" v-model="mairuN"
						:placeholder="operateType==1?i18n.t028:i18n.t031" class="flex-1 inputText text-alignR A-Medium"
						:class="model=='light'?'inputTextLight':''"
						:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				</view>
			</view>
			<view class="mx-3 flex align-center justify-between" style="margin-top: 14rpx;margin-bottom: 28rpx;">
				<view @click="changeBFB(item)" v-for="(item,index) in 4" :key="index" class="bar"
					:class="model=='light'?'barLight':''">
					<view class="bar1">

					</view>
					<view class="bar2 text-alignC A-Regular">
						{{item*25}}%
					</view>
				</view>
			</view>
			<view @click="changearea" class="f0 flex align-center justify-center">
				<image style="width: 92rpx;height: 92rpx;" :src="'/static/images/trade/3_'+model+'.png'" mode="">
				</image>
			</view>
			<!-- 获得币种 -->
			<view class="formWrap mx-3" :class="model=='light'?'formWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="title A-Medium">
						{{i18n.t009}}
					</view>
					<view class="money A-Regular">
						<!-- 可用1000.58 USDT -->
					</view>
				</view>
				<view class="inputWrap px-2 flex align-center">
					<view @click="clickH(2)" class="flex align-center">
						<view class="f0">
							<!-- btc -->
							<image v-if="operateType==1&&huodeT=='BTC'" style="width: 40rpx;height: 40rpx;"
								:src="'/static/images/trade/4_'+model+'.png'" mode=""></image>
							<!-- eth -->
							<image v-else-if="operateType==1&&huodeT=='ETH'" style="width: 40rpx;height: 40rpx;"
								:src="'/static/images/trade/23_'+model+'.png'" mode=""></image>
							<!-- usdt -->
							<image v-else style="width: 40rpx;height: 40rpx;"
								:src="'/static/images/trade/1_'+model+'.png'" mode=""></image>
						</view>
						<view class="inputTitle A-Medium">
							{{huodeT}}
						</view>
						<view class="f0">
							<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/trade/2_'+model+'.png'"
								mode=""></image>
						</view>
					</view>
					<input type="text" v-model="huodeN" disabled :placeholder="i18n.t029"
						class="flex-1 inputText text-alignR A-Medium" :class="model=='light'?'inputTextLight':''"
						:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				</view>
			</view>
			<!-- 已选择交易所 -->
			<view class="A-Regular mt-3 mx-3 selected flex align-center justify-between"
				:class="model=='light'?'selectedLight':''">
				<view class="flex align-center">
					<view class="" style="margin-right: 4rpx;">
						{{i18n.t010}}
					</view> 
					<view class="titleBox2 flex align-center justify-center">
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
								:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(list[listIndex3].exName)+'.png'"
								mode=""></image>

						</view>
						<view class="text1">
							{{list[listIndex3].exName||''}}
						</view>
					</view>
				</view>
				<view class="flex align-center">
					<view class="">
						{{i18n.t011}} {{free2}}%
					</view>
					<!-- <view class="f0" style="margin-left: 4rpx;">
						<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/trade/5_'+model+'.png'"
							mode=""></image>
					</view> -->
				</view>
			</view>
			<view class="A-Regular mx-3 selected flex align-center justify-between"
				:class="model=='light'?'selectedLight':''" style="margin-top: 8rpx;margin-bottom: 48rpx;">
				<view class="" style="margin-right: 4rpx;">
					{{i18n.t012}}：
					<text :style="{ 'color': list[listIndex3].priceChangePercent24h.indexOf('-') != -1 ? '#53D290':'#D22540' }">
						${{list[listIndex3].price || ''}}
					</text>
				</view>
				<view class="">
					≈
					<template v-if="operateType == 1">
						{{(huodeN*free2/100).toFixed(6)}}
					</template>
					<template v-else>
						{{(huodeN*free2/100).toFixed(6)}}
					</template>
					{{huodeT}}
				</view>
			</view>
			<!-- 交易所列表 -->
			<view class="listTitle ml-3 A-Medium" :class="model=='light'?'listTitleLight':''">
				{{i18n.t013}}
			</view>
			<view class="A-Regular mx-3 flex flex-wrap justify-between pb-1">
				<view @click="changelistIndex3(index)" v-for="(item,index) in list" :key="index" class="mb-3"
					style="flex-shrink: 0;">
					<view :class="index==listIndex3?'titleBox2':model=='light'?'titleBox1Light':'titleBox1'"
						class="flex align-center justify-center">
						<!-- <view class="icon">

						</view> -->
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
								:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exName)+'.png'" mode="">
							</image>
						</view>
						<view class="text1">
							{{item.exName}}
						</view>
					</view>
					<view class="titleBox1 flex align-center justify-center" :class="model=='light'?'titleBox1Light':''"
						style="margin-top: 4rpx;">
						<view :class="(item.priceChangePercent24h.indexOf('-')!=-1)?'text2':'text3'">
							${{item.price}}
						</view>
					</view>
				</view>
				<!-- <view v-if="list.length!=0" v-for="(item,index) in ((4-list.length%4))" class="mb-3"
					style="flex-shrink: 0;opacity: 0;">
					<view class="flex align-center titleBox1 justify-center">

					</view>
				</view> -->
			</view>
		</template>
		<template v-if="topBarIndex==1">
			<!-- 交易所列表 -->
			<view class="listTitle flex align-center justify-between mx-3 A-Medium"
				:class="model=='light'?'listTitleLight':''">
				<view class="">
					{{i18n.t032}}
				</view>
				<view class="flex align-center">
					<view class="">
						{{i18n.t044}}
					</view>
					<view class=""
						style="width: 16rpx;height: 8rpx;background: #5951BA;margin-left: 8rpx;margin-right: 8rpx;">

					</view>
					<view class="">
						{{i18n.t045}}
					</view>
					<view class="" style="width: 16rpx;height: 8rpx;background: #82DA4C;margin-left: 8rpx;">

					</view>
				</view>
			</view>
			<view class="A-Regular mx-3 flex flex-wrap justify-between pb-1">
				<view @click="clickList(index)" v-for="(item,index) in list" class="mb-3" style="flex-shrink: 0;">
					<view
						:class="((listIndex1==index&&type==0)||(listIndex2==index&&type==1))?'titleBox2':model=='light'?'titleBox1Light':'titleBox1'"
						class="flex align-center justify-center"
						:style="(listIndex2==index&&type==1)?'background: #82DA4C;':''">
						<!-- <view class="icon">

						</view> -->
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
								:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exName)+'.png'" mode="">
							</image>
						</view>
						<view class="text1">
							{{item.exName}}
						</view>
					</view>
					<view class="titleBox1 flex align-center justify-center" :class="model=='light'?'titleBox1Light':''"
						style="margin-top: 4rpx;">
						<view :class="(item.priceChangePercent24h.indexOf('-')!=-1)?'text2':'text3'">
							${{item.price}}
						</view>
					</view>
				</view>
				<!-- <view v-if="list.length!=0" v-for="(item,index) in ((4-list.length%4))" class="mb-3"
					style="flex-shrink: 0;opacity: 0;">
					<view class="flex align-center titleBox1 justify-center">

					</view>
				</view> -->
			</view>

			<view class="flex mb-3 mx-3 justify-between">
				<!-- 买入交易所 -->
				<view @click="changeType(0)" class="mairu flex align-center" :class="model=='light'?'mairuLight':''">
					<view class="mr-2">
						<view class="leftTop A-Medium">
							{{i18n.t089}}
						</view>
						<view v-if="listIndex1==-1" class="flex align-center">
							<view class="leftB1 A-Medium mr-1">
								{{i18n.t047}}
							</view>
							<view class="f0">
								<image style="width: 8rpx;height: 14rpx;" :src="'/static/images/trade/12_'+model+'.png'"
									mode=""></image>
							</view>
						</view>
						<view v-else class="flex align-center">
							<view class="leftB2 A-Medium mr-1">
								{{i18n.t048}}
							</view>
							<view class="f0">
								<image style="width: 8rpx;height: 14rpx;" :src="'/static/images/trade/13_'+model+'.png'"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="" style="flex-shrink: 0;">
						<view :class="listIndex1!=-1?'titleBox2':model=='light'?'titleBox1Light':'titleBox1'"
							class="flex align-center justify-center">
							<template v-if="listIndex1!=-1">
								<view class="f0">
									<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
										:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(list[listIndex1].exName)+'.png'"
										mode=""></image>
								</view>
								<view class="text1">
									${{list[listIndex1].exName}}
								</view>
							</template>

						</view>
						<view class="titleBox1 flex align-center justify-center"
							:class="model=='light'?'titleBox1Light':''" style="margin-top: 4rpx;">

							<template v-if="listIndex1!=-1">
								<view
									:class="(list[listIndex1].priceChangePercent24h.indexOf('-')!=-1)?'text2':'text3'">
									${{list[listIndex1].price}}
								</view>
							</template>
						</view>
					</view>
				</view>
				<!-- 卖出交易所 -->
				<view @click="changeType(1)" class="mairu flex align-center" :class="model=='light'?'mairuLight':''">
					<view class="mr-2">
						<view class="leftTop A-Medium">
							{{i18n.t090}}
						</view>
						<view v-if="listIndex2==-1" class="flex align-center">
							<view class="leftB1 A-Medium mr-1">
								{{i18n.t047}}
							</view>
							<view class="f0">
								<image style="width: 8rpx;height: 14rpx;" :src="'/static/images/trade/12_'+model+'.png'"
									mode=""></image>
							</view>
						</view>
						<view v-else class="flex align-center">
							<view class="leftB2 A-Medium mr-1">
								{{i18n.t048}}
							</view>
							<view class="f0">
								<image style="width: 8rpx;height: 14rpx;" :src="'/static/images/trade/13_'+model+'.png'"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="" style="flex-shrink: 0;">
						<view :class="listIndex2!=-1?'titleBox2':model=='light'?'titleBox1Light':'titleBox1'"
							class="flex align-center justify-center" :style="listIndex2!=-1?'background: #82DA4C;':''">
							<template v-if="listIndex2!=-1">
								<!-- <view class="icon">

								</view> -->
								<view class="f0">
									<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
										:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(list[listIndex2].exName)+'.png'"
										mode=""></image>
								</view>
								<view class="text1">
									{{list[listIndex2].exName}}
								</view>
							</template>
						</view>
						<view class="titleBox1 flex align-center justify-center"
							:class="model=='light'?'titleBox1Light':''" style="margin-top: 4rpx;">

							<template v-if="listIndex2!=-1">
								<view
									:class="(list[listIndex2].priceChangePercent24h.indexOf('-')!=-1)?'text2':'text3'">
									${{list[listIndex2].price}}
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
			<template v-if="listIndex1!=-1&&listIndex2!=-1">
				<!-- 可用余额-未实现盈利 -->
				<view class="menu1 mb-3 flex align-center py-2 mx-3 pl-3" :class="model=='light'?'menu1Light':''">
					<view class="flex-1" style="width: 150rpx;">
						<view class="title">
							{{i18n.t050}}
						</view>
						<!-- 可用余额 -->
						<view class="flex align-center">
							<view class="text1">
								<!-- 00.58 -->
								{{operateType2==0?USDTMoney.a:
								operateType2==1?USDTMoney.a:''}}
							</view>
							<!-- <view class="f0">
								<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/trade/2_'+model+'.png'"
									mode=""></image>
							</view> -->
						</view>
					</view>
					<view class="flex-1" style="width: 168rpx;">
						<view class="title" style="margin-left: 15%;">
							{{i18n.t083}}
						</view>
						<view class="flex align-center" style="margin-left: 12%;">
							<view @click="changeMairuNum(0)" class="f0 mr-1">
								<image style="width: 28rpx;height: 28rpx;"
									:src="'/static/images/trade/14_'+model+'.png'" mode=""></image>
							</view>
							<view class="text1">
								{{mairuNum}}
							</view>
							<view @click="changeMairuNum(1)" class="f0 ml-1">
								<image style="width: 28rpx;height: 28rpx;"
									:src="'/static/images/trade/15_'+model+'.png'" mode=""></image>
							</view>
						</view>
					</view>
					<view class="flex-1" style="width: 168rpx;">
						<view class="title">
							{{i18n.t052}}
						</view>
						<view class="text1">
							${{(mairuNum*list[listIndex1].price).toFixed(4)}}
						</view>
					</view>
					<view class="flex-1" style="width: 162rpx;">
						<view class="title">
							{{i18n.t053}}
						</view>
						<view
							:class="((((this.list[this.listIndex2].price*mairuNum*1000-this.list[this.listIndex1].price*mairuNum*1000))-((this.list[this.listIndex1].price*mairuNum*free/100+((this.list[this.listIndex2].price*mairuNum*1000-this.list[this.listIndex1].price*mairuNum*1000)/1000)*free3/100)*1000))/1000).toFixed(4)<0?'text3':'text2'">
							${{((((this.list[this.listIndex2].price*mairuNum*1000-this.list[this.listIndex1].price*mairuNum*1000))-((this.list[this.listIndex1].price*mairuNum*free/100+((this.list[this.listIndex2].price*mairuNum*1000-this.list[this.listIndex1].price*mairuNum*1000)/1000)*free3/100)*1000))/1000).toFixed(4)}}
						</view>
					</view>
				</view>
				<!-- 最小数额、手续费 -->
				<view class="flex mx-3 align-center justify-between menu2 mb-3 align-center">
					<view class="">
						<view class="">
							{{i18n.t054}}
						</view>
						<view class="">
							{{minNum}}{{this.operateType2==0?'BTC':'ETH'}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{i18n.t084}} {{free}}%
						</view>
						<view class="">
							≈<text style="color: #53D290;">${{(mairuNum*list[listIndex1].price*free/100).toFixed(4)}}</text> USDT
						</view>
					</view>
					<!-- <view class="">
						<view class="">
							{{i18n.t056}} {{free2}}%
						</view>
						<view class="">
							≈${{(mairuNum*list[listIndex2].price*free2/100).toFixed(2)}} USDT
						</view>
					</view> -->
					<view class="">
						<view class="">
							{{i18n.t085}} {{free3}}%
						</view>
						<view class="">
							≈<text style="color: #53D290;">{{((mairuNum*list[listIndex2].price*1000-mairuNum*list[listIndex1].price*1000)/1000*free3/100).toFixed(4)>0?((mairuNum*list[listIndex2].price*1000-mairuNum*list[listIndex1].price*1000)/1000*free3/100).toFixed(4):0}}</text>
							USDT
						</view>
					</view>

				</view>
			</template>

		</template>
		<!-- vip topBarIndex==0||-->
		<view v-if="topBarIndex==1" @click="$tool.navTo('/pages/member/member?isTrade=1')"
			class="vipWrap flex align-center px-3 justify-between ml-3" :class="model=='light'?'vipWrapLight':''">
			<view v-if="vipClass=='VIP0'" class="A-Bold title">
				VIP {{i18n.t014}}
			</view>
			<view v-else class="A-Bold title">
				{{vipClass}}
			</view>
			<view v-if="vipClass=='VIP0'" class="flex align-center">
				<view class="desc A-Regular">
					{{i18n.t074}}
				</view>
				<view class="f0">
					<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/trade/10_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<view v-else class="flex align-center">
				<view class="desc A-Regular">
					{{i18n.t015}}{{vipEndTime}}{{i18n.t016}}
				</view>
				<view class="f0">
					<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/trade/10_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 立即交易 -->
		<view v-if="topBarIndex==0" @click="ljjy" class="btn ml-3 mb-4 text-alignC A-Regular">
			{{i18n.t017}}
		</view>
		<view @click="createdOrder" v-if="topBarIndex==1" class="btn ml-3 mb-4 mt-4 text-alignC A-Regular">
			{{i18n.t058}}
		</view>
		<template v-if="topBarIndex==0">
			<view class="orderTab ml-3 flex align-center justify-between" :class="model=='light'?'orderTabLight':''">
				<view class="flex align-center">
					<view @click="changeBuySell('buy')" class="mr-3" :class="buySell=='buy'?'tabItem2':'tabItem1'">
						{{i18n.t018}}
					</view>
					<view @click="changeBuySell('sell')" :class="buySell=='sell'?'tabItem2':'tabItem1'">
						{{i18n.t019}}
					</view>
				</view>
				<!-- <view @click="$tool.navTo('/pages/trade/xhjyjl?buySell='+buySell)" class="label A-Regular"
					:class="model=='light'?'labelLight':''">
					{{i18n.t020}}
				</view> -->
				<view class="f0 mr-3">
					<image @click="$tool.navTo('/pages/trade/xhjyjl?buySell='+buySell)"
						style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="orderList A-Medium" style="margin-top: 14rpx;" :class="model=='light'?'orderListLight':''">
				<view v-for="(item,index) in orderList3" class="orderItem mx-3" style="margin-bottom: 12rpx;">
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{item.orderNo}}
						</view>
						<view class="">
							{{item.createTime}}
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="flex align-center">
							<view class="text2" style="margin-right: 12rpx;">
								{{item.getCoinType}}
							</view>
							<view :class="item.buySell=='buy'?'label2':'label'">
								{{item.buySell=='buy'?i18n.t022:i18n.t075}}
							</view>
						</view>
						<view class="flex align-center">
							<view class="f0">
								<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
									:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exchange)+'.png'"
									mode=""></image>
							</view>
							<view class="text3">
								{{item.exchange}}
							</view>
						</view>
					</view>
					<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t023}}({{item.buyCoinType}})
						</view>
						<view class="">
							${{item.buyCoinAmount}}
						</view>
					</view> -->
					<!-- 买入数量/卖出数量 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{item.buySell=='buy'?i18n.t081:i18n10.n119}}
						</view>
						<view class="">
							<template v-if="item.buySell=='buy'">
								$
							</template>
							{{item.buyCoinAmount}}
							<template v-if="item.buySell!='buy'">
								{{item.buyCoinType}}
							</template>
						</view>
					</view>
					<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t024}}({{item.buyCoinType}})
						</view>
						<view class="">
							${{item.buyCoinSoldPrice}}
						</view>
					</view> -->
					<!-- 买入价位/卖出价位 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{item.buySell=='buy'?i18n10.n120:i18n10.n121}}
						</view>
						<view class="">
							${{item.buyCoinSoldPrice}}
						</view>
					</view>
					<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t025}}({{item.getCoinType}})
						</view>
						<view class="">
							{{item.getCoinSoldAmount}}
						</view>
					</view> -->
					<!-- 成交金额 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t025}}
						</view>
						<view class="">
							{{item.getCoinSoldAmount}}
							<template v-if="item.buySell != 'buy'">
								{{item.getCoinType}}
							</template>
							<template v-else>
								{{item.getCoinType}}
							</template>
						</view>
					</view>
					<!-- 手续费 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t026}}({{Number((item.fee / item.getCoinSoldAmount * 100).toFixed(2))}}%)
						</view>
						<view class="" style="color: #53D290;">
							- {{item.fee}}{{item.getCoinType}}
						</view>
					</view>
					<!-- 实际获得 -->
					<view class="flex text1 align-center justify-between">
						<view class="">
							{{i18n.t027}}
						</view>
						<view class="">
							{{item.getCoinActualAmount}}{{item.getCoinType}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="topBarIndex==1">
			<!-- 正在处理订单 -->
			<view class="orderTab A-Medium ml-3 flex align-center justify-between"
				:class="model=='light'?'orderTabLight':''">
				<view class="flex align-center">

					<view @click="changeArbitrageOrderStatus(1)" class="mr-3"
						:class="arbitrageOrderStatus==1?'tabItem2':'tabItem1'">
						<!-- {{i18n.t059}} -->
						{{i18n10.n124}}
					</view>
					<view @click="changeArbitrageOrderStatus(2)" :class="arbitrageOrderStatus==2?'tabItem2':'tabItem1'">
						<!-- {{i18n.t060}} -->
						{{i18n10.n125}}
					</view>
				</view>
				<view class="f0 mr-3">
					<!-- $tool.navTo('/pages/trade/xhjyjl?buySell='+buySell) -->
					<image @click="$tool.navTo('/pages/tljyjl/tljyjl')" style="width: 56rpx;height: 56rpx;"
						:src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="orderList A-Medium" style="margin-top: 14rpx;" :class="model=='light'?'orderListLight':''">
				<view v-for="(item,index) in orderList1" :key="item.id" class="orderItem mx-3"
					style="margin-bottom: 12rpx;"
					:style="item.arbitrageOrderStatus==2?'background: url(/static/images/yiwancheng.png);background-size: 180rpx 180rpx;background-repeat: no-repeat;background-position: 50% 100%;':''">
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{item.orderNo}}
						</view>
						<view class="">
							{{item.createTime}}
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="flex align-center">
							<view class="text2" style="margin-right: 12rpx;">
								{{i18n.t046}}
							</view>
						</view>
						<view class="flex align-center">
							<view class="f0">
								<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
									:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.buyExchange)+'.png'"
									mode=""></image>
							</view>
							<view class="text1">
								{{item.buyExchange}}
							</view>
							<view class="price1" style="margin-left: 5rpx;">
								${{item.buyExchangePrice}}
							</view>
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t051}}({{item.coinType}})
						</view>
						<view class="">
							{{item.buyAmount}}
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t086}}(USDT)
						</view>
						<view class="">
							{{item.orderAmount}}
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="flex align-center">
							<view class="text2" style="margin-right: 12rpx;">
								{{i18n.t049}}
							</view>
						</view>
						<view class="flex align-center">
							<view class="f0">
								<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
									:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.sellExchange)+'.png'"
									mode=""></image>
							</view>
							<view class="text1">
								{{item.sellExchange}}
							</view>
							<view class="price2" style="margin-left: 5rpx;">
								${{item.sellExchangePrice}}
							</view>
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t088}}({{item.coinType}})
						</view>
						<view class="">
							{{item.sellAmount}}
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t086}}(USDT)
						</view>
						<view class="">
							{{item.sellSoldAmount}}
						</view>
					</view>
					<!-- 订单处理耗时 -->
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="flex align-center">
							<view class="text2" style="margin-right: 12rpx;">
								{{i18n.t064}}
							</view>
						</view>
						<view class="text1">
							{{item.arbitrageOrderStatus==1?item.ddhs:item.clsj}}
						</view>
					</view>
					<!-- 预计完成时间 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t065}}
						</view>
						<view class="">
							{{item.orderExpectedTime}}
						</view>
					</view>
					<!-- 完成进度 -->
					<view class="flex  align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="text1">
							{{i18n.t066}}
						</view>
						<view class="flex align-center">
							<view :class="item.ddjd=='100%'?'text1':'price3'">
								{{item.ddjd}}
							</view>
							<view class="f0" style="position: relative;">
								<image @click="changeOrderShow(index)" style="width: 28rpx;height: 28rpx;"
									:src="'/static/images/trade/16_'+model+'.png'" mode=""></image>
								<view v-if="item.show" class="p-2 A-Medium" style="position:absolute;bottom: 28rpx;right: 28rpx;background: #5951BA;
border-radius: 30rpx 30rpx 0rpx 30rpx;font-size: 24rpx;color: #F7F7F7;min-width: 614rpx;">
									{{item.arbitrageOrderStatus==2?i18n.t076:i18n.t067}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="flex align-center">
							<view class="text2" style="margin-right: 12rpx;">
								{{i18n.t068}}
							</view>
						</view>
						<view class="text2">
							{{item.orderProfitLoss}}USDT
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							<!-- {{i18n.t069}} -->
							{{i18n.t084}}({{item.buyFeeRate}}%)
						</view>
						<view class="" style="color: #53D290;">
							- {{item.buyFee}}(USDT)
						</view>
					</view>
					<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t070}}(USDT)
						</view>
						<view class="">
							{{item.sellFee}}(-{{item.sellFeeRate}}%)
						</view>
					</view> -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							<!-- {{i18n.t071}} -->
							{{i18n.t085}}({{Math.abs(item.platformFeeRate)}}%)
						</view>
						<view class="" style="color: #53D290;">
							{{Math.abs(item.platformFee) == 0 ? '0' : '-' + Math.abs(item.platformFee)}}(USDT)
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="topBarIndex==2">
			<view class="bigTitle ml-3 mb-3 A-Medium flex justify-between" :class="model=='light'?'bigTitleLight':''">
				<view>
					{{i18n.t072}}
				</view>
				<view @click="$tool.navTo('/pages/fwb/fwb?type=15')" class="f0 mr-3">
					<image style="width: 30rpx;height: 30rpx;" :src="'/static/images/guize_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<view @click="goPage('USDT')" class="lList mx-3 flex align-center justify-between"
				:class="model=='light'?'lListLight':''">
				<view class="f0 mr-2">
					<image style="width: 72rpx;height: 72rpx;" src="/static/images/trade/17.png" mode=""></image>
				</view>
				<view class="flex-1">
					<view class="title A-Bold">
						USDT
					</view>
					<view class="desc">
						{{i18n.t087}} {{USDTtotalAmountSum}}
					</view>
				</view>
				<view class="f0 flex align-center">
					<view class="desc">
						{{i18n10.n128}}
					</view>
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/rightArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<view @click="goPage('BTC')" class="lList mx-3 flex align-center justify-between"
				:class="model=='light'?'lListLight':''">
				<view class="f0 mr-2">
					<image style="width: 72rpx;height: 72rpx;" src="/static/images/trade/18.png" mode=""></image>
				</view>
				<view class="flex-1">
					<view class="title A-Bold">
						BTC
					</view>
					<view class="desc">
						{{i18n.t087}} {{BTCtotalAmountSum}}
					</view>
				</view>
				<view class="f0 flex align-center">
					<view class="desc">
						{{i18n10.n128}}
					</view>
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/rightArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<view @click="goPage('ETH')" class="lList mx-3 flex align-center justify-between"
				:class="model=='light'?'lListLight':''">
				<view class="f0 mr-2">
					<image style="width: 72rpx;height: 72rpx;" src="/static/images/trade/19.png" mode=""></image>
				</view>
				<view class="flex-1">
					<view class="title A-Bold">
						ETH
					</view>
					<view class="desc">
						{{i18n.t087}} {{ETHtotalAmountSum}}
					</view>
				</view>
				<view class="f0 flex align-center">
					<view class="desc">
						{{i18n10.n128}}
					</view>
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/rightArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<!-- 全部交易记录 -->
			<!-- <view class="bigTitle ml-3 mt-4 mb-3 A-Medium" :class="model=='light'?'bigTitleLight':''">
				{{i18n.t035}}
			</view> -->
			<!-- 储蓄池订单 -->
			<view class="orderTab ml-3 mt-3 flex align-center justify-between"
				:class="model=='light'?'orderTabLight':''">
				<view class="flex align-center">
					<view @click="changeBuySell2(0)" class="mr-3" :class="buySell2==0?'tabItem2':'tabItem1'">
						{{i18n10.n129}}
					</view>
					<view @click="changeBuySell2(1)" :class="buySell2==1?'tabItem2':'tabItem1'">
						{{i18n10.n130}}
					</view>
				</view>
			</view>
			<!-- 储蓄池订单 -->
			<view class="orderList A-Medium" style="margin-top: 14rpx;" :class="model=='light'?'orderListLight':''">
				<view v-for="(item,index) in orderList2"
					:style="item.orderStatus==0?'':'background: url(/static/images/yidaoqi.png);background-size: 180rpx 180rpx;background-repeat: no-repeat;background-position: 240rpx 100%;'"
					class="orderItem mx-3" style="margin-bottom: 12rpx;">
					<!-- 单号 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n10.n131}}
						</view>
						<view class="">
							{{item.orderNo}}
						</view>
					</view>
					<!-- 储蓄池名称 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n10.n132}}
						</view>
						<view class="">
							{{item.coinType}}
						</view>
					</view>
					<!-- 存入金额 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n10.n133}}
						</view>
						<view class="">
							{{item.depositAmount}} {{item.coinType}}
						</view>
					</view>
					<!-- 存入天数 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n10.n134}}
						</view>
						<view class="">
							{{item.period}} {{i18n10.n135}}
						</view>
					</view>
					<!-- 预期收益 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n10.n136}}
						</view>
						<view class="" style="color: #D22540;">
							{{item.yield}}%
						</view>
					</view>
					<!-- 存入时间 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n10.n137}}
						</view>
						<view class="">
							{{item.purchaseDate}}
						</view>
					</view>
					<!-- 开始收益 -->
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t039}}
						</view>
						<view class="">
							{{item.yieldStartDate}}
						</view>
					</view>
					<!-- 到期时间 -->
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="text1">
							{{i18n10.n138}}
						</view>
						<view class="text1">
							{{item.maturityDate}}
						</view>
					</view>
					<!-- 订单状态 -->
					<view class="flex text1 align-center justify-between">
						<view class="">
							{{i18n10.n139}}
						</view>
						<view class="" :style="item.orderStatus==0?'color: #82DA4C;':''">
							{{item.orderStatus==0?'进行中':'已到期'}}
						</view>
					</view>
				</view>
				<!-- <view v-for="(item,index) in orderList2" class="orderItem mx-3" style="margin-bottom: 12rpx;">
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{item.orderNo}}
						</view>
						<view class="">
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="flex align-center">
							<view class="text1" style="margin-right: 12rpx;">
								{{i18n.t036}}
							</view>
						</view>
						<view class="flex align-center">
							<view class="text2">
								{{item.depositAmount}} {{item.coinType}}
							</view>
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t037}}
						</view>
						<view class="">
							{{item.yield}}
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t038}}
						</view>
						<view class="">
							{{item.purchaseDate}}
						</view>
					</view>
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.t039}}
						</view>
						<view class="">
							{{item.yieldStartDate}}
						</view>
					</view>
					<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="text1">
							{{i18n.t040}}
						</view>
						<view class="text3">
							{{item.maturityDate}}
						</view>
					</view>
					<view class="flex text1 align-center justify-between">
						<view class="">
							{{i18n.t041}}
						</view>
						<view class="">
							${{item.fee}}
						</view>
					</view>
				</view> -->
			</view>
		</template>
		<view
			v-if="(topBarIndex==0&&orderList3.length==0)||(topBarIndex==1&&orderList1.length==0)||(topBarIndex==2&&orderList2.length==0)"
			class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n10.n144}}
		</view>
		<czPoup ref="czPoups" :isShowUSDT="false" :type="btnType" @confirm="czConfirm"></czPoup>
		<modelP :type="3" ref="modelP" @confirm="confrim"></modelP>
	</view>
</template>

<script>
	import {
		marketsBTC,
		marketsETH,
		totalAmount,
		arbitrageAdd,
		arbitrageList,
		liquidityCisternList,
		liquidityCisternYieldAmount,
		spotBuyAdd,
		spotBuyList,
		spot_fee_rate,
		arbitrage_fee_rate,
		liquidityCisternQuota
	} from '@/core/api/index.js';
	// import * as echarts from 'echarts' // 引入ECharts库
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	import czPoup from '@/components/czPoup.vue';
	import modelP from '@/components/modelP.vue';
	export default {
		components: {
			czPoup,
			modelP
		},
		data() {
			return {
				topBarIndex: 0, //0 1 2
				operateType: 1, //1买入 2卖出
				operateType2: 0, //0btc 1eth
				list: [], //交易所
				type: 0, //0选择买入交易所 1选择卖出交易所
				listIndex1: 0, //选择的买入交易所
				listIndex2: 2, //选择的卖出交易所
				mairuNum: 0.00, //买入数额
				arbitrageOrderStatus: 1, //1处理中 2已完成
				pageNo: 1, //套利
				pageSize: 10, //套利
				orderList1: [],
				minNum: 0,
				minNumObj: {},
				free: 0, //买入手续费
				free2: 0, //现货手续费
				free3: 0, //平台手续费
				pageNo2: 1, //储蓄池
				pageSize2: 10, //储蓄池
				orderList2: [],
				// 现货秒交易
				btnType: -1,
				mairuT: 'USDT',
				huodeT: 'BTC',
				mairuN: '',
				huodeN: '',
				buySell: 'buy',
				buySell2: 0,
				pageNo3: 1, //现货秒交易
				pageSize3: 10, //现货秒交易
				orderList3: [],
				listIndex3: 0, //选择的交易所
				tableList1: {},
				tableList2: {},
				tableList3: {},
				// 储蓄池总额
				BTCtotalAmountSum: 0,
				ETHtotalAmountSum: 0,
				USDTtotalAmountSum: 0,
				// vipClass:uni.getStorageSync('vipClass'),
				// vipEndTime:uni.getStorageSync('vipEndTime'),
				// 
				changeOrderTimer: null,
				payType: 0, // 0 跨平台套利  2 现货秒交易 
				timer: null
			}
		},
		onTabItemTap(e) {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			// 用户余额
			this.$store.dispatch('config/getAassetList');
			// this.getLiquidityCisternQuota();
			if (this.topBarIndex == 2) {
				this.getTotalAmount();
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
				this.getLiquidityCisternYieldAmount();
			}
			// 现货手续费
			spot_fee_rate().then(res => {
				console.log(res.result, 'cs-spot_fee_rate');
				this.free2 = res.result;
			})
			
			// 套利最小倍数与费率
			arbitrage_fee_rate().then(res => {
				console.log(res.result, 'cs-arbitrage_fee_rate');
				this.free = res.result.buyFeeRate;
				this.minNumObj = res.result;
				if (this.operateType2 == 0) {
					this.minNum = this.minNumObj.minMultipleBTC;
				} else {
					this.minNum = this.minNumObj.minMultipleETH;
				}
				this.mairuNum = this.minNum;
				this.free3 = res.result.platformFeeRate;
			})
			
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			vipClass() {
				return this.$store.state.config.vipClass;
			},
			vipEndTime() {
				return this.$store.state.config.vipEndTime;
			},
			i18n() {
				return this.$t('trade')
			},
			i18n2() {
				return this.$t('showToast')
			},
			i18n3() {
				return this.$t('last')
			},
			i18n10() {
				return this.$t('newObj');
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			BTCMoney() {
				return this.$store.state.config.BTCMoney
			},
			ETHMoney() {
				return this.$store.state.config.ETHMoney
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			model() {
				return this.$store.state.config.model;
			},
			BTCList() {
				return this.$store.state.config.BTCList.sort((a, b) => {
					return a.exName.localeCompare(b.exName);
				});
			},
			ETHList() {
				return this.$store.state.config.ETHList.sort((a, b) => {
					return a.exName.localeCompare(b.exName);
				});
			},
		},
		watch: {
			BTCList(newValue, oldValue) {
				if (this.topBarIndex == 0) {
					if (this.btnType == 1) {
						if (this.mairuT == 'BTC') {
							this.list = newValue;
						}
					} else if (this.btnType == 2) {
						if (this.huodeT == 'BTC') {
							this.list = newValue;
						}
					}
				} else if (this.topBarIndex == 1) {
					if (this.operateType2 == 0) {
						this.list = newValue;
					}
				}
			},
			ETHList(newValue, oldValue) {
				if (this.topBarIndex == 0) {
					if (this.btnType == 1) {
						if (this.mairuT == 'ETH') {
							this.list = newValue;
						}
					} else if (this.btnType == 2) {
						if (this.huodeT == 'ETH') {
							this.list = newValue;
						}
					}
				} else if (this.topBarIndex == 1) {
					if (this.operateType2 != 0) {
						this.list = newValue;
					}
				}
			},
		},
		onLoad(options) {
			this.list = this.BTCList;
			uni.$on('changeTopBarIndex', this.changeTopBarIndex);
			options.topBarIndex = 0;
			if (options.topBarIndex) {
				this.changeTopBarIndex(options.topBarIndex);
			}
			this.btnType = 2;
			this.zhuanhuan();
			this.getSpotBuyList();
			// 页面加载时启动定时器
			this.startTimer();
		},
		onReady() {
			this.getLiquidityCisternYieldAmount(); //cs-------cs
			this.$tool.setStatusBarStyle(this.model);
			return;
		},
		onReachBottom() {
			if (this.topBarIndex == 0) {
				this.pageNo3++;
				this.getSpotBuyList();
			}
			if (this.topBarIndex == 1) {
				this.pageNo++;
				this.getArbitrageList();
			}
			if (this.topBarIndex == 2) {
				this.pageNo2++;
				this.getLiquidityCisternList();
			}

		},
		onUnload() {
			// 页面卸载时清除定时器
			this.stopTimer();
		},
		methods: {
			changeBFB(item) {
				this.mairuN = (item * 25 * (this.mairuT == 'USDT' ? this.USDTMoney.a :
					this.mairuT == 'BTC' ? this.BTCMoney.a :
					this.mairuT == 'ETH' ? this.ETHMoney.a : '') / 100).toFixed(4);
				this.zhuanhuan();

			},
			changeBuySell2(e) {
				if (this.buySell2 == e) {
					return;
				}
				this.buySell2 = e;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			changeBuySell(e) {
				if (this.buySell == e) {
					return;
				}
				this.buySell = e;
				this.pageNo3 = 1;
				this.getSpotBuyList();
			},
			getSpotBuyList() {
				spotBuyList({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					buySell: this.buySell,
					pageNo: this.pageNo3,
					pageSize: this.pageSize3
				}).then(res => {
					console.log(res, 'cs-spotBuyList');
					let list = res.result.records;
					if (this.pageNo3 == 1) {
						this.orderList3 = list;
					} else {
						if (list.length == 0) {
							this.pageNo3--;
						} else {
							this.orderList3.push(...list);
						}
					}
				})
			},
			zhuanhuan() {
				if (this.operateType == 1) {
					// 买入
					this.huodeN = (this.mairuN / this.list[this.listIndex3].price).toFixed(6);
				} else if (this.operateType == 2) {
					// 卖出
					this.huodeN = (this.mairuN * this.list[this.listIndex3].price).toFixed(6);
				}
			},
			ljjy() {
				// 现货手续费
				spot_fee_rate().then(res => {
					console.log(res.result, 'cs-spot_fee_rate');
					this.free2 = res.result;
				})
				
				// 套利最小倍数与费率
				arbitrage_fee_rate().then(res => {
					console.log(res.result, 'cs-arbitrage_fee_rate');
					this.free = res.result.buyFeeRate;
					this.free3 = res.result.platformFeeRate;
				})
				
				// if (this.passportAuthStatus != 3) {
				// 	// 未提交
				// 	this.$tool.showToast(this.i18n3.l015);
				// 	return;
				// }
				if (this.mairuN === '') {
					if (this.operateType == 1) {
						// 买入
						this.$tool.showToast(this.i18n.t028);
						return;
					} else if (this.operateType == 2) {
						// 卖出
						this.$tool.showToast(this.i18n.t031);
						return;
					}
				}
				if (this.huodeN === '') {
					this.$tool.showToast(this.i18n2.st035);
					return;
				}
				this.payType = 2;
				// this.$tool.navTo('/pages/mine/moneyPass?type=2');
				this.$refs.modelP.open();
			},
			createdOrder() {
				// 现货手续费
				spot_fee_rate().then(res => {
					console.log(res.result, 'cs-spot_fee_rate');
					this.free2 = res.result;
				})
				
				// 套利最小倍数与费率
				arbitrage_fee_rate().then(res => {
					console.log(res.result, 'cs-arbitrage_fee_rate');
					this.free = res.result.buyFeeRate;
					this.free3 = res.result.platformFeeRate;
				})
				
				// if (this.passportAuthStatus != 3) {
				// 	// 未提交
				// 	this.$tool.showToast(this.i18n3.l015);
				// 	return;
				// }
				if (this.listIndex1 == -1 || this.listIndex2 == -1) {
					this.$tool.showToast(this.i18n2.st034);
					return;
				}
				if (this.mairuNum == 0) {
					this.$tool.showToast(this.i18n2.st035);
					return;
				}
				this.payType = 0;
				// this.$tool.navTo('/pages/mine/moneyPass');
				this.$refs.modelP.open();
			},
			// pass
			confrim(e) {
				if (this.payType == 2) {
					if(!this.validateAmount(this.mairuN)){
						return this.$tool.showToast(this.i18n10.n155);
					}
					console.log(this.list[this.listIndex3], 'cs');
					spotBuyAdd({
						mobileUserId: uni.getStorageSync('mobileUserId'),
						buyCoinAmount: this.mairuN, //买入数额
						buySell: this.operateType == 1 ? 'buy' : 'sell', //买入或卖出，买入：buy，卖出：sell
						exchange: this.list[this.listIndex3].exName, //交易所
						buyCoinType: this.mairuT, //买入币种
						// buyCoinSoldPrice: this.mairuN, //成交价
						buyCoinSoldPrice: this.list[this.listIndex3].price,
						getCoinSoldAmount: this.huodeN,
						getCoinType: this.huodeT
					}).then(res => {
						console.log(res, 'cs');
						this.$tool.showToast(this.i18n3.l004);
						// 用户余额
						this.$store.dispatch('config/getAassetList');
						this.pageNo3 = 1;
						this.getSpotBuyList();
					})
				} else {
					arbitrageAdd({
						buyAmount: this.mairuNum,
						buyExchange: this.list[this.listIndex1].exName,
						buyExchangePrice: this.list[this.listIndex1].price,
						coinType: this.operateType2 == 0 ? 'BTC' : 'ETH',
						membershipLevel: this.vipClass,
						mobileUserId: uni.getStorageSync('mobileUserId'),
						// orderAmount: (this.mairuNum * this.list[this.listIndex1].price).toFixed(2),
						sellAmount: this.mairuNum,
						sellExchange: this.list[this.listIndex2].exName,
						sellExchangePrice: this.list[this.listIndex2].price
						// sellPrice: (this.mairuNum * this.list[this.listIndex2].price).toFixed(2),
					}).then(res => {
						this.$tool.showToast(this.i18n3.l004);
						// 用户余额
						this.$store.dispatch('config/getAassetList');
						this.pageNo = 1;
						this.getArbitrageList();
					})
				}
			},
			validateAmount(value, decimals = 6) {
			    // 空值校验
				if (!value) return false;
				
				// 转为字符串处理
				const strValue = value.toString();
				
				// 金额格式正则
				// ^[1-9]\d*$ 匹配大于0的整数
				// ^0$ 匹配0
				// ^[1-9]\d*\.\d{1,2}$ 匹配小数(小数位数可通过decimals参数控制)
				// ^0\.\d{1,2}$ 匹配以0开头的小数
				const regExp = new RegExp(`^(([1-9]\\d*)|0)(\\.\\d{1,${decimals}})?$`);
				
				return regExp.test(strValue);
			},
			changeMairuNum(e) {
				if (e == 0) {
					if (this.mairuNum != this.minNum) {
						this.mairuNum = (this.mairuNum * 1000 - this.minNum * 1000) / 1000;
					}
				} else {
					this.mairuNum = (this.mairuNum * 1000 + this.minNum * 1000) / 1000;
				}
			},
			changelistIndex3(e) {
				this.listIndex3 = e;
				this.zhuanhuan();
			},
			clickList(e) {
				if (this.type == 1) {
					this.listIndex2 = e;
				} else {
					this.listIndex1 = e;
				}
			},
			changeType(e) {
				this.type = e;
			},
			changeTopBarIndex(e) {
				if (this.topBarIndex == e) {
					return;
				}
				this.topBarIndex = e;
				if (this.topBarIndex == 1) {
					if (this.operateType2 == 0) {
						this.getMarketsBTC();
					} else {
						this.getMarketsETH();
					}
					this.pageNo = 1;
					this.getArbitrageList();
				}
				if (this.topBarIndex == 2) {
					this.getTotalAmount();
					this.pageNo2 = 1;
					this.getLiquidityCisternList();
					this.getLiquidityCisternYieldAmount();
				}
				
				// 现货手续费
				spot_fee_rate().then(res => {
					console.log(res.result, 'cs-spot_fee_rate');
					this.free2 = res.result;
				})
				
				// 套利最小倍数与费率
				arbitrage_fee_rate().then(res => {
					console.log(res.result, 'cs-arbitrage_fee_rate');
					this.free = res.result.buyFeeRate;
					this.minNumObj = res.result;
					this.minNum = this.minNumObj.minMultipleBTC;
					this.mairuNum = this.minNum;
					this.free3 = res.result.platformFeeRate;
				})
			},
			// 点击买入输入框
			clickM(e) {
				if (this.operateType == 1) {
					return;
				}
				this.btnType = e;
				setTimeout(e => {
					this.zhuanhuan();
				}, 200)
				this.$refs.czPoups.open();
			},
			clickH(e) {
				if (this.operateType == 2) {
					return;
				}
				this.btnType = e;
				setTimeout(e => {
					this.zhuanhuan();
				}, 200)
				this.$refs.czPoups.open();
			},
			czConfirm(item) {
				if (this.btnType == 1) {
					this.mairuT = item.value;
				}
				if (this.btnType == 2) {
					this.huodeT = item.value;
				}
				if (item.value == 'BTC') {
					this.getMarketsBTC();
				} else {
					this.getMarketsETH();
				}
				this.zhuanhuan();
				this.mairuN = ''
				this.huodeN = ''
			},
			// 点击获得输入框
			changearea() {
				let type = this.operateType == 1 ? 2 : 1;
				this.changeOperateType(type);
			},
			// 买入卖出
			changeOperateType(e) {
				if (this.operateType == e) {
					return;
				}
				this.btnType = e == 2 ? 1 : 2;
				this.operateType = e;
				let tem = this.mairuT;
				this.mairuT = this.huodeT;
				this.huodeT = tem;
				this.mairuN = '';
				this.huodeN = '';
			},
			// btc eth
			changeOperateType2(e) {
				if (this.operateType2 == e) {
					return;
				}
				this.operateType2 = e;
				if (this.operateType2 == 0) {
					this.minNum = this.minNumObj.minMultipleBTC;
					this.mairuNum = this.minNum;
					this.getMarketsBTC();
				} else {
					this.minNum = this.minNumObj.minMultipleETH;
					this.mairuNum = this.minNum;
					this.getMarketsETH();
				}
			},
			getMarketsBTC() {
				this.list = this.BTCList;
				// this.$tool.showLoading();
				// marketsBTC().then(res => {
				// 	this.list = res.result;
				// 	for (let i = 0; i < this.list.length; i++) {
				// 		this.list[i].volUsd24h = (this.list[i].volUsd24h / 100000000).toFixed(2);
				// 		this.list[i].price = (this.list[i].price / 1).toFixed(2);
				// 	}
				// 	uni.hideLoading();
				// }).catch(err => {
				// 	uni.hideLoading();
				// })
			},
			getMarketsETH() {
				this.list = this.ETHList;
				// this.$tool.showLoading();
				// marketsETH().then(res => {
				// 	this.list = res.result;
				// 	for (let i = 0; i < this.list.length; i++) {
				// 		this.list[i].volUsd24h = (this.list[i].volUsd24h / 100000000).toFixed(2);
				// 		this.list[i].price = (this.list[i].price / 1).toFixed(2);
				// 	}
				// 	uni.hideLoading();
				// }).catch(err => {
				// 	uni.hideLoading();
				// })
			},
			changeArbitrageOrderStatus(e) {
				if (this.arbitrageOrderStatus == e) {
					return;
				}
				this.arbitrageOrderStatus = e;
				this.pageNo = 1;
				this.getArbitrageList();
			},
			// 获取订单列表
			getArbitrageList() {
				arbitrageList({
					coinType: '',
					mobileUserId: uni.getStorageSync('mobileUserId'),
					arbitrageOrderStatus: this.arbitrageOrderStatus,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					console.log(res.result.records, 'cs');
					let list = res.result.records;
					if (this.pageNo == 1) {
						this.orderList1 = list;
					} else {
						if (list.length == 0) {
							this.pageNo--;
						} else {
							this.orderList1.push(...list);
						}
					}
					let uniqueOrders = {};
					this.orderList1 = this.orderList1.filter(order => {
					    if (!uniqueOrders[order.id]) {
					        uniqueOrders[order.id] = true;
					        return true;
					    }
					    return false;
					});
					
					for (let i = 0; i < this.orderList1.length; i++) {
						this.orderList1[i].show = false;
					}
					
					this.changeOrderInfo();
				})
			},
			changeOrderShow(i) {
				this.orderList1[i].show = !this.orderList1[i].show;
				this.$forceUpdate();
			},
			async initChart1(list) {
				// const chartContainer = this.$refs.chartContainer1;
				let chart = await this.$refs.chartContainer1.init(echarts);
				// 数据
				let topData = list;
				let option = {
					grid: {
						top: '0%', // 调整顶部间距
						bottom: '-30%', // 调整底部间距
						left: '-55%',
						right: '-40%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						show: false,
					}, ],

					yAxis: {
						show: false
					},
					series: [{
							name: '上传',
							type: 'line',
							smooth: false, //是否平滑
							showSymbol: false,
							lineStyle: {
								roundness: 1,
								normal: {
									color: '#74db5f', // 更改线的颜色
								},
							},
							data: topData,
						},

					],
				};
				chart.setOption(option)
			},
			async initChart2(list) {
				// const chartContainer = this.$refs.chartContainer1;
				let chart = await this.$refs.chartContainer2.init(echarts);
				// 数据
				let topData = list;
				let option = {
					grid: {
						top: '0%', // 调整顶部间距
						bottom: '-30%', // 调整底部间距
						left: '-55%',
						right: '-40%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						show: false,
					}, ],

					yAxis: {
						show: false
					},
					series: [{
							name: '上传',
							type: 'line',
							smooth: false, //是否平滑
							showSymbol: false,
							lineStyle: {
								roundness: 1,
								normal: {
									color: '#FFBC0D', // 更改线的颜色
								},
							},
							data: topData,
						},

					],
				};
				chart.setOption(option)
			},
			async initChart3(list) {
				// const chartContainer = this.$refs.chartContainer1;
				let chart = await this.$refs.chartContainer3.init(echarts);
				// 数据
				let topData = list;
				let option = {
					grid: {
						top: '0%', // 调整顶部间距
						bottom: '-30%', // 调整底部间距
						left: '-55%',
						right: '-40%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						show: false,
					}, ],

					yAxis: {
						show: false
					},
					series: [{
							name: '上传',
							type: 'line',
							smooth: false, //是否平滑
							showSymbol: false,
							lineStyle: {
								roundness: 1,
								normal: {
									color: '#5974e7', // 更改线的颜色
								},
							},
							data: topData,
						},

					],
				};
				chart.setOption(option)
			},
			getTotalAmount() {
				// return;
				totalAmount({
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res => {
					for (let i = 0; i < res.result.length; i++) {
						this[res.result[i].coinType + 'totalAmountSum'] = res.result[i].totalAmountSum;
					}
				})
			},
			getLiquidityCisternQuota() {
				liquidityCisternQuota({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					coinType: 'BTC'
				}).then(res => {
					this.BTCtotalAmountSum = res.result.totalQuotaRemain;
				})
				liquidityCisternQuota({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					coinType: 'ETH'
				}).then(res => {
					this.ETHtotalAmountSum = res.result.totalQuotaRemain;
				})
				liquidityCisternQuota({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					coinType: 'USDT'
				}).then(res => {
					this.USDTtotalAmountSum = res.result.totalQuotaRemain;
				})
			},
			goPage(e) {
				uni.setStorageSync('lType', e);
				this.$tool.navTo('/pages/trade/trade2')
			},
			// 储蓄池订单
			getLiquidityCisternList() {
				// this.buySell2 //0进行中 1已到期
				liquidityCisternList({
					coinType: '',
					pageNo: this.pageNo2,
					pageSize: this.pageSize2,
					mobileUserId: uni.getStorageSync('mobileUserId'),
					orderStatus: this.buySell2
				}).then(res => {
					console.log(res, 'cs');
					let list = res.result.records;
					if (this.pageNo2 == 1) {
						this.orderList2 = list;
					} else {
						if (list.length == 0) {
							this.pageNo2--;
						} else {
							this.orderList2.push(...list);
						}
					}
				})
			},
			// 储蓄池顶部曲线图
			async getLiquidityCisternYieldAmount() {
				let res1 = await liquidityCisternYieldAmount({
					coinType: 'BTC',
					mobileUserId: uni.getStorageSync('mobileUserId'),
				})
				let obj1 = res1.result;
				obj1.allYieldAmount = 0;
				obj1.list = [0];
				for (let i = 0; i < obj1.dataList.length; i++) {
					obj1.allYieldAmount += obj1.dataList[i].yieldAmount;
					obj1.list.push(obj1.dataList[i].yieldAmount);
				}
				this.tableList1 = obj1;
				if (obj1.list.length == 1) obj1.list.push(0);
				// this.initChart1(obj1.list);
				let res2 = await liquidityCisternYieldAmount({
					coinType: 'USDT',
					mobileUserId: uni.getStorageSync('mobileUserId'),
				})
				let obj2 = res2.result;
				obj2.allYieldAmount = 0;
				obj2.list = [0];
				for (let i = 0; i < obj2.dataList.length; i++) {
					obj2.allYieldAmount += obj2.dataList[i].yieldAmount;
					obj2.list.push(obj2.dataList[i].yieldAmount);
				}
				this.tableList2 = obj2;
				if (obj2.list.length == 1) obj2.list.push(0);
				// this.initChart2(obj2.list);
				let res3 = await liquidityCisternYieldAmount({
					coinType: 'ETH',
					mobileUserId: uni.getStorageSync('mobileUserId'),
				})
				let obj3 = res3.result;
				obj3.allYieldAmount = 0;
				obj3.list = [0];
				for (let i = 0; i < obj3.dataList.length; i++) {
					obj3.allYieldAmount += obj3.dataList[i].yieldAmount;
					obj3.list.push(obj3.dataList[i].yieldAmount);
				}
				this.tableList3 = obj3;
				if (obj3.list.length == 1) obj3.list.push(0);
				// this.initChart3(obj3.list);
				console.log(res1, res2, res3, 'cs-------cs');
			},
			changeOrderInfo() {
				if (this.orderList1.length == 0) {
					return;
				}
				clearInterval(this.changeOrderTimer);
				this.changeOrderTimer = null;
				if (this.arbitrageOrderStatus != 2) {
					this.changeOrderTimer = setInterval(res => {
						// console.log('cs-changeOrderInfo2');
						this.changeOrderInfo2();
					}, 1000)
				} else {
					for (let i = 0; i < this.orderList1.length; i++) {
						this.orderList1[i].clsj = this.getclsj(this.orderList1[i].createTime, this.orderList1[i]
							.orderExpectedTime);
						this.orderList1[i].ddjd = '100%';
					}
				}
			},
			getclsj(a, b) {
				const startTime = new Date(a);
				const endTime = new Date(b);

				// 计算时间差（毫秒）
				const diffMilliseconds = endTime.getTime() - startTime.getTime();

				// 转换为小时、分钟和秒
				const hours = Math.floor(diffMilliseconds / (1000 * 60 * 60));
				const minutes = Math.floor((diffMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((diffMilliseconds % (1000 * 60)) / 1000);
				console.log(a, b, 'cs------cs', hours, minutes, seconds);
				return String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds)
					.padStart(2, '0')
			},
			changeOrderInfo2() {
				for (let i = 0; i < this.orderList1.length; i++) {

					try {
						this.orderList1[i].ddhs = this.calculateTimeDifference(this.orderList1[i].createTime.replace(' ',
							'T'));
						this.orderList1[i].ddjd = this.getCurrentTimeProgress(this.orderList1[i].createTime.replace(' ',
							'T'), this.orderList1[i].orderExpectedTime.replace(' ', 'T'));

					} catch (e) {
						//TODO handle the exception
					}
				}
				this.$forceUpdate();
			},
			// 获取订单进度
			getCurrentTimeProgress(startTimeStr, endTimeStr) {
				const startTime = new Date(startTimeStr);
				const endTime = new Date(endTimeStr);
				const currentTime = new Date();
				// 验证时间的有效性
				if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
					console.error('Invalid date string provided.');
					return;
				}
				if (startTime >= endTime) {
					console.error('Start time must be before end time.');
					return;
				}
				if (currentTime < startTime || currentTime > endTime) {
					console.error('Current time is not within the specified range.');
					return;
				}

				// 计算时间段总长度和当前时间位置
				const totalDuration = endTime - startTime;
				const currentOffset = currentTime - startTime;

				// 计算百分比
				let percentage = (currentOffset / totalDuration) * 100;
				// console.log(percentage,'cs-percentage');
				if (percentage.toFixed(2) >= 100) {
					this.pageNo = 1;
					this.getArbitrageList();
					return;
				}
				return percentage.toFixed(2) + '%';



			},
			// 获取订单耗时
			calculateTimeDifference(specificDateStr) {
				// 将特定日期字符串转换为Date对象
				const specificDate = new Date(specificDateStr);
				if (isNaN(specificDate.getTime())) {
					console.error('Invalid date string provided.');
					return;
				}
				// 获取当前时间
				const now = new Date();

				// 计算时间差
				const difference = now - specificDate;

				// 如果时间差小于0，说明当前时间还未达到特定时间
				if (difference < 0) {
					console.log('当前时间早于特定时间。');
					return;
				}
				// 将时间差转换为小时、分钟和秒
				let hours = Math.floor(difference / (1000 * 60 * 60));
				let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
				let seconds = Math.floor((difference % (1000 * 60)) / 1000);
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				return hours + ':' + minutes + ':' + seconds;
			},
			startTimer() {
				// 每秒执行一次
				this.timer = setInterval(() => {
					this.checkMaturityDates();
				}, 1000);
			},
			stopTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			checkMaturityDates() {
				const currentTime = new Date(); // 获取当前时间
				this.orderList2.forEach(item => {
					// 将 item.maturityDate 转换为 Date 对象进行比较
					const maturityDate = new Date(item.maturityDate);
					if (maturityDate <= currentTime) {
						item.orderStatus = 1; // 设置为已到期
					} else {
						item.orderStatus = 0; // 设置为进行中
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.lList {
		padding: 26rpx 0;
		border-bottom: 2rpx solid #1F2128;

		.title {
			font-size: 32rpx;
			color: #F7F7F7;
		}

		.desc {
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	.lListLight {
		padding: 26rpx 0;
		border-bottom: 2rpx solid #DBDEE4;

		.title {
			font-size: 32rpx;
			color: #0E0F11;
		}

		.desc {
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	.bigTitle {
		font-size: 32rpx;
		color: #F7F7F7;
	}

	.bigTitleLight {
		font-size: 32rpx;
		color: #0E0F11;
	}

	.charts {
		// width: 100%;
		// height: 200rpx;
		// height: 92rpx;
		overflow: hidden;

		.chart-container {
			width: 100%;
			height: 92rpx;
			// margin-top: -100rpx;
			// margin-left: -40rpx;
		}
	}

	.banner {
		overflow-x: scroll;

		// padding-left: 30rpx;
		.desc2 {}

		.item1 {
			.label {
				background: rgba(210, 37, 64, .2);
			}
		}

		.item2 {
			.label {
				background: rgba(210, 37, 64, .2);
			}
		}

		.item3 {
			.label {
				background: rgba(210, 37, 64, .2);
			}
		}

		.num {
			font-size: 40rpx;
			color: #F7F7F7;
		}

		.item1,
		.item2,
		.item3 {
			width: 364rpx;
			// height: 456rpx;
			background: #1F2128;
			border-radius: 60rpx;
			margin-right: 30rpx;
			flex-shrink: 0;

			.title {
				font-size: 48rpx;
				color: #F7F7F7;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}

			.label {
				padding: 0 20rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				// opacity: .3;
				font-size: 26rpx;
				color: #D22540;
				margin-left: 30rpx;
				margin-right: 30rpx;
				border: none;
			}

			.desc {
				font-size: 24rpx;
				color: #AAACB8;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}
	}

	.bannerLight {
		overflow-x: scroll;
		margin-left: 30rpx;

		.desc2 {}

		.item1 {
			.label {
				background: rgba(130, 218, 76, .3);
				color: #82DA4C;
			}
		}

		.item2 {
			.label {
				background: rgba(251, 174, 4, .3);
				color: #FBAE04;
			}
		}

		.item3 {
			.label {
				background: rgba(89, 116, 231, .3);
				color: #fff;
			}
		}

		.num {
			font-size: 40rpx;
			color: #0E0F11;
		}

		.item1,
		.item2,
		.item3 {
			width: 364rpx;
			// height: 456rpx;
			background: #FFFFFF;
			border-radius: 60rpx;
			margin-right: 30rpx;
			flex-shrink: 0;

			.title {
				font-size: 48rpx;
				color: #0E0F11;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}

			.label {
				padding: 0 20rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 26rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #AAACB8;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}
	}

	.menu2 {
		font-size: 22rpx;
		color: #7F838D;

		view {
			flex-shrink: 0;
		}
	}

	.menu1 {
		background: #16181C;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #1F2128;

		view {
			flex-shrink: 0;
		}

		.title {
			font-size: 20rpx;
			color: #AAACB8;
		}

		.text1 {
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.text2 {
			font-size: 24rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 24rpx;
			color: #53D290;
		}
	}

	.menu1Light {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #ffffff;

		view {
			flex-shrink: 0;
		}

		.title {
			font-size: 20rpx;
			color: #7F838D;
		}

		.text1 {
			font-size: 24rpx;
			color: #0E0F11;
		}

		.text2 {
			font-size: 24rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 24rpx;
			color: #53D290;
		}
	}

	.mairu {
		.titleBox1 {
			background: #1F2128;
		}

		.leftTop {
			font-size: 24rpx;
			color: #AAACB8;
			margin-bottom: 8rpx;
		}

		.leftB1 {
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.leftB2 {
			font-size: 24rpx;
			color: #FFB41F;
		}

		width: 330rpx;
		background: #16181C;
		border-radius: 16rpx;
		border: 2rpx solid #1F2128;
		padding: 22rpx 20rpx;
	}

	.mairuLight {

		.titleBox1 {
			background: #F4F4F4;
		}

		.titleBox1Light {
			background: #F4F4F4;
		}

		.leftTop {
			font-size: 24rpx;
			color: #0E0F11;
			margin-bottom: 8rpx;
		}

		.leftB1 {
			font-size: 24rpx;
			color: #B5B7BF;
		}

		.leftB2 {
			font-size: 24rpx;
			color: #FFB41F;
		}

		width: 330rpx;
		background: #fff;
		border-radius: 16rpx;
		border: 2rpx solid #fff;
		padding: 22rpx 20rpx;
	}

	.orderTab {
		.tabItem1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.tabItem2 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}

	.orderTabLight {
		.tabItem1 {
			color: #7F838D;
		}

		.tabItem2 {
			color: #0E0F11;
		}
	}

	.orderList {
		.orderItem {
			padding: 24rpx 30rpx;
			background: #16181C;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #1F2128;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.text3 {
				font-size: 24rpx;
				color: #F7F7F7;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #F7F7F7;
				margin-right: 8rpx;
			}

			.icon2 {
				width: 20rpx;
				height: 20rpx;
				background: #7F838D;
				margin-right: 8rpx;
			}

			.label {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #82DA4C;
				font-size: 20rpx;
				color: #82DA4C;
			}

			.label2 {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #E7343F;
				font-size: 20rpx;
				color: #E7343F;
			}

			.price1 {
				font-size: 24rpx;
				color: #E7343F;
			}

			.price2 {
				font-size: 24rpx;
				color: #53D290;
			}

			.price3 {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}

	.orderListLight {
		.orderItem {
			background: #FFFFFF;
			border: 2rpx solid #fff;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				color: #0E0F11;
			}

			.text3 {
				color: #0E0F11;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #0E0F11;
				margin-right: 8rpx;
			}

			.label {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #82DA4C;
				font-size: 20rpx;
				color: #82DA4C;
				background: #fff;
			}
		}
	}

	.btn {
		width: 690rpx;
		height: 72rpx;
		background: #5951BA;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #F7F7F7;
		line-height: 72rpx;
	}

	.vipWrap {
		width: 690rpx;
		height: 104rpx;
		background: rgba(255, 180, 31, 0.1);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid rgba(255, 180, 31, 0.2);
		// opacity: .4;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #FFB41F;
		}

		.desc {
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	.vipWrapLight {
		background: #FFB41F;
		border: 2rpx solid rgba(255, 180, 31, 0.3);
		opacity: 1;

		.title {
			color: #FFFFFF;
		}

		.desc {
			color: rgba(255, 255, 255, 0.7);
		}
	}

	.listTitle {
		font-size: 24rpx;
		color: #AAACB8;
		margin-bottom: 14rpx;
	}

	.listTitleLight {
		color: #0E0F11;
	}

	.selected {
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.selectedLight {
		color: #7F838D;
	}

	// title-start
	.titleBox1 {
		width: 150rpx;
		height: 38rpx;
		background: #16181C;
		border-radius: 4rpx;

		.icon {
			width: 20rpx;
			height: 20rpx;
			background: #AAACB8;
			margin-right: 8rpx;
		}

		.text1 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text2 {
			font-size: 24rpx;
			color: #53D290;
		}

		.text3 {
			font-size: 24rpx;
			color: #D22540;
		}
	}

	.titleBox1Light {
		height: 38rpx;
		background: #fff;

		.icon {
			width: 20rpx;
			height: 20rpx;
			margin-right: 8rpx;
			background: #7F838D;
		}

		.text1 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text2 {
			font-size: 24rpx;
			color: #53D290;
		}

		.text3 {
			font-size: 24rpx;
			color: #D22540;
		}
	}

	.titleBox2 {
		width: 150rpx;
		height: 38rpx;
		background: #5951BA;
		border-radius: 4rpx;

		.icon {
			width: 20rpx;
			height: 20rpx;
			background: #F7F7F7;
			margin-right: 8rpx;
		}

		.text1 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}

	// title-end
	.bar {
		width: 150rpx;

		.bar1 {
			width: 150rpx;
			height: 8rpx;
			background: #1F2128;
		}

		.bar2 {
			margin-top: 4rpx;
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	.barLight {
		width: 150rpx;

		.bar1 {
			width: 150rpx;
			height: 8rpx;
			background: #FFFFFF;
		}

		.bar2 {
			margin-top: 4rpx;
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	// 顶部切换
	.topBar {
		// width: 504rpx;
		min-height: 68rpx;
		border-radius: 34rpx;
		border: 2rpx solid #1F2128;
		font-size: 28rpx;

		.item {
			flex-shrink: 0;
			min-height: 64rpx;
			color: #7F838D;
			padding: 14rpx;
		}

		.item2 {
			flex-shrink: 0;
			min-height: 64rpx;
			color: #F7F7F7;
			background: #5951BA;
			border-radius: 34rpx;
			padding: 14rpx;
		}
	}

	.topBarLight {
		background: #fff;
		border: none;

		.item {
			color: #7F838D;
		}

		.item2 {
			color: #FFFFFF;
			background: #5951BA;
		}
	}

	.nameList {
		margin-top: 34rpx;

		.item {
			// width: 144rpx;
			// height: 60rpx;
			padding: 10rpx 18rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			// width: 144rpx;
			// height: 60rpx;
			padding: 10rpx 18rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}

	.label {
		padding: 8rpx 0;
		padding-left: 24rpx;
		padding-right: 16rpx;
		background: #1F2128;
		border-radius: 24rpx 0rpx 0rpx 24rpx;
		border: 2rpx solid rgba(247, 247, 247, 0.3);
		font-size: 22rpx;
		color: #F7F7F7;
	}

	.labelLight {
		color: #0E0F11;
		background: unset;
		border: 2rpx solid rgba(14, 15, 17, 0.3);
	}

	.formWrap {
		.title {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.money {
			font-size: 24rpx;
			color: #7F838D;
		}

		.inputWrap {
			width: 690rpx;
			height: 80rpx;
			background: #16181C;
			border-radius: 16rpx;
			margin-top: 14rpx;

			.inputTitle {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
			}
		}
	}

	.formWrapLight {
		.title {
			color: #0E0F11;
		}

		.money {
			color: #47474A;
		}

		.inputWrap {
			background: #FFFFFF;

			.inputTitle {
				color: #B5B7BF;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}
		}
	}
</style>